<template>
<div>
  <nav-bar>
    订单预览
  </nav-bar>
  <div style="margin-top: 45px">
  <div class="order">
      <div class="order-header" style="height:50px;margin:60px 10px 0">
        <div style="float: left">
          <span>{{ nameAndPrice()||''}}</span>
          <p style="margin-top:10px;font-size: 14px">{{ (address.province+address.city+address.county+address.address)||''}}</p>
        </div>
        <div style="float:right;padding-top:18px">
        <van-icon name="arrow"/>
        </div>
      </div>
    <div>
      <img width="340" height="50" src="../../../assets/img/fenge.png" style="margin-top: 10px;margin-left:10px"/>
    </div>
      <div class="order-footer">
        <van-card style="background-color: white"
            :num="item.num"
            :price="item.goods.price+'.00'"
            desc="暂无描述"
            :title="item.goods.title"
            :thumb="item.goods.cover_url" v-for="item in cartList" :key="item.id"
        />
      </div>
  </div>
    <van-submit-bar
        :price="Number(totalPrice)*100"
        button-text="生成订单"
        @submit="onSubmit"
    >
      <view slot="left">商品金额</view>
    </van-submit-bar>
  </div>
  <!--      closeable用来添加关闭按钮的-->
  <van-popup
      :show="isShow"
      position="bottom"
      :overlay="true"
      @close="onClose"
      close-on-click-overlay
  >
    <van-grid :border="false" :column-num="2" style="margin-top: 20px">
      <van-grid-item style="float:left;">
        支付宝二维码
        <van-image :src="aliyun" width="150px" height="187px"/>
      </van-grid-item>
      <van-grid-item style="float:left;">
        微信二维码
        <van-image :src="wechat" width="150px" height="187px"/>
      </van-grid-item>
    </van-grid>
  </van-popup>
</div>
</template>

<script>
import {ref, reactive, getCurrentInstance, onMounted, toRefs, computed} from 'vue'
import {useStore} from 'vuex'
import {Toast} from 'vant'
import {useRouter} from 'vue-router'
export default {
  name: "createOrder",
  setup(){
    const isShow=ref(false)
    const router=useRouter()
    let state=reactive({
      address:{},
      cartList:[],
      orderNo:'',
      aliyun:'',
      wechat:''
    })
    const {proxy} =getCurrentInstance()
    const store=useStore()
    const onSubmit=()=>{
      isShow.value=true
    const params={
    address_id:state.address.id
      }
   proxy.$API.order.createOrder(params).then(res=>{
     console.log(res)
     store.dispatch('updateCart')
     state.orderNo=res.id
     proxy.$API.order.payOrder(state.orderNo,{type:'aliyun'}).then(res=>{
       console.log(res)
       state.aliyun=res.qr_code_url
       state.wechat=res.qr_code_url
     })
     const timer=setInterval(()=>{
       proxy.$API.order.parOrderStatus(state.orderNo).then(res=>{
         console.log(res)
         if(res=='1'){
           clearInterval(timer)
           Toast('支付成功!')
           router.push({path:'/orderDetail',query:{id:state.orderNo}})
         }
       })
     },3000)
   })
    }
    const onClose=()=>{
   isShow.value=false
    }
    const nameAndPrice=()=>(state.address.name+' '+state.address.phone)||''
    const totalPrice=computed(()=>{
      return state.cartList.reduce((pre,current)=>{
        return (pre+current.goods.price)
      },0)+'.00'
    })
    const init=()=>{
      Toast({message:'正在加载中',forbidClick:true})
      proxy.$API.order.getOrderPreview().then(res=>{
        console.log(res)
        state.cartList=res.carts
      let address=res.address.filter(item=>item.is_default=='1')
        state.address=address[0]
        if(state.address.length==0){
          state.address={address:'请选择或添加地址'}
        }
      })
    }
    onMounted(()=>{
      init()
    })
    return{
      onSubmit,
      ...toRefs(state),
      totalPrice,
      nameAndPrice,
      isShow,
      onClose
    }
  }
}
</script>

<style scoped>
::v-deep .van-submit-bar{
  position:fixed;
  bottom: 50px;
  background-color: #f0f0f0;
}
::v-deep .van-card__price{
  color: red;
}
::v-deep .van-card__num{
  font-size: 16px;
}
::v-deep .van-icon{
  font-size: 20px;
}
</style>
